<template>
	<view class="footprint-box">
		<cu-custom :isBack="true" bgColor="bg-fa">
			<block slot="content">我的足迹</block>
			<view class="cu-right" slot="right">
				<text class="right-text" @tap="switchDeleteType">{{isDelete ? '取消':'编辑'}}</text>
			</view>
		</cu-custom>
		
		<view class="list-box">
			
			<view class="list-time" v-for="(item,index) in list" :key="index">
				
				<u-sticky bg-color="#f0f0f0">
					<view class="time-text">{{item.time}}</view>
				</u-sticky>
				
				<view class="list-item" v-for="(goods,gInd) in item.list" :key="gInd">
					<view class="check-box" v-show="isDelete">
						<u-checkbox  @change="footCheck('',goods,gInd,index)"  v-model="goods.check" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
					</view>
					<view class="img-box">
						<image class="img" :src="goods.img"></image>
					</view>
					<view class="content-box">
						<view class="name u-line-2">
							{{goods.goodsName}}
						</view>
						<view class="coll">
							{{goods.collection}}收藏
						</view>
						<view class="price-box">
							<view class="price">
								￥ {{goods.price}}
							</view>
							<view class="similar">找相似</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="check-all-box" v-show="isDelete">
			<view class="check-left">
				<u-checkbox  @change="checkAll"  v-model="Allchecked" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
				全部
			</view>
			<view class="check-right">
				<view class="check-btn" @tap="deleteFootprint">
					删除
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"footprint",
		data(){
			return {
				pageNo:1,
				isMore:false,
				isDelete:false,
				Allchecked:false,
				
				list:[
					{
						time:'2020-12-19',
						list:[
							{id:0,goodsName:"念奴娇-生辰有怀 人生一世，四季有序，今树经一轮，而余长一岁； 其二十六载空悲切，未忘其心； 然花开不择贫家地",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:500,collection:20
							},
							{id:1,goodsName:"南有樛木，葛藟累之。乐只君子，福履绥之。南有樛木，葛藟荒之。乐只君子，福履将之。南有樛木，葛藟萦之。乐只君子，福履成之。",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:10,collection:50
							},
							{id:2,goodsName:"无家对寒食，有泪如金波。斫却月中桂，清光应更多。",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:40,collection:10000
							},
							{id:3,goodsName:"山冥云阴重，天寒雨意浓。数枝幽艳湿啼红。莫为惜花惆怅对东风",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:200,collection:50000
							}
						]
					},
					{
						time:'2020-12-16',
						list:[
							{id:4,goodsName:"蓑笠朝朝出，沟塍处处通。人间辛苦是三农。要得一犁水足望年丰",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:333,collection:78
							},
							{id:5,goodsName:"廉颇者，赵之良将也。赵惠文王十六年，廉颇为赵将，伐齐，大破之，取阳晋，拜为上卿，以勇气闻于诸侯",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:132,collection:50
							},
							{id:6,goodsName:"赵惠文王时，得楚和氏璧。秦昭王闻之，使人遗赵王书，愿以十五城请易璧。赵王与大将军廉颇诸大臣谋",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:4.0,collection:1100
							},
							{id:7,goodsName:"秦王坐章台见相如，相如奉璧奏秦王。秦王大喜，传以示美人及左右，左右皆呼万岁。相如视秦王无意偿赵城",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:50,collection:50780
							},
							{id:4,goodsName:"蓑笠朝朝出，沟塍处处通。人间辛苦是三农。要得一犁水足望年丰",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:333,collection:78
							},
							{id:5,goodsName:"廉颇者，赵之良将也。赵惠文王十六年，廉颇为赵将，伐齐，大破之，取阳晋，拜为上卿，以勇气闻于诸侯",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:132,collection:50
							},
							{id:6,goodsName:"赵惠文王时，得楚和氏璧。秦昭王闻之，使人遗赵王书，愿以十五城请易璧。赵王与大将军廉颇诸大臣谋",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:4.0,collection:1100
							},
							{id:7,goodsName:"秦王坐章台见相如，相如奉璧奏秦王。秦王大喜，传以示美人及左右，左右皆呼万岁。相如视秦王无意偿赵城",
							img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
							price:50,collection:50780
							}
						]
					}
				]
			}
		},
		methods:{
			
			/*  点击选择全部按钮  */
			checkAll(check){
				if(check.value){
					this.checkMethods(1)
				}else{
					this.checkMethods(2)
				}
			},
			
			/*   删除历史足迹   */
			deleteFootprint(){
				let check = this.checkMethods(3)
				if(check.length>0){
					
				}
			},
			
			/*  选择全部 获取取消全部选择 或者 获取已经选择 type 1 是选择全部 2是取消全部 3是获取已经选择的  */
			
			checkMethods(type){
				let list = JSON.parse(JSON.stringify(this.list))
				let isTrue = true
				if(type == 2){
					isTrue = false
				}
				let check = []
				for (let i = 0; i < list.length; i++) {
					let item = list[i].list
					for (let j = 0; j < item.length; j++) {
						if(type == 1 || type == 2){
							item[j].check = isTrue
						}else if(type == 3 && item[j].check){
							check.push(item[j].id)
						}
					}
					list[i].list = item
				}
				if(type == 1 || type == 2){
					this.list = list
				}else if(type == 3){
					return check
				}
			},
			
			
			/*   足迹选中  第一个参数空 item 是商品信息 ind是商品所在的index pInd 所在父级的index  */ 
			footCheck(n,item,ind,pInd){
				let check = item.hasOwnProperty("check") ? item.check : true
				this.$set(this.list[pInd].list[ind],'check',check)
			},
			
			/*  切换删除模式  */
			switchDeleteType(){
				this.isDelete = !this.isDelete
			},
			
			/*  0 是刷新与第一次加载  1是滚动到底部加载  */
			getList(type){
				uni.stopPullDownRefresh()
				this.$ajax("history").then((res)=>{
					
				})
			}
		},
		onLoad() {
			// this.getList()
		},
		/*  下拉刷新  */
		onPullDownRefresh() {
			let t = setTimeout(() => {
				this.pageNo = 1
				this.isMore = false
				this.getList(0)
				clearTimeout(t)
			}, 1000)
		},
		
		/*  滚动到底部  */
		onReachBottom(){
			if(this.isMore){
				this.pageNo = this.pageNo + 1
				this.getList(1)
			}
		},
	}
</script>

<style scoped lang="scss">
	page{
		background: #F0F0F0;
	}
	.footprint-box{
		width: 100%;
		.cu-right{
			.right-text{
				font-size: 24rpx;
				padding-right: 30rpx;
				color: #FFFFFF;
			}
		}
		.list-box{
			padding: 0 12rpx 140rpx 12rpx;
			
		}
		.list-time{
			padding: 20rpx 0 0 0;
			text-align: center;
		}
		.time-text{
			font-size: 24rpx;
			color: #818181;
			background: #F0F0F0;
		}
		.list-item{
			background: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 30rpx 20rpx;
			border-radius: 10rpx 10rpx;
			margin-top: 30rpx;
			.check-box{
				min-width: 80rpx;
				max-width: 80rpx;
			}
			.img-box{
				max-width: 192rpx;
				min-width: 192rpx;
				height: 192rpx;
				.img{
					width: 192rpx;
					height: 192rpx;
				}
			}
			.content-box{
				flex-grow: 1;
				padding-left: 16rpx;
				text-align: left;
				.name{
					color: #333333;
					font-size: 26rpx;
					font-weight: 400;
					height: 80rpx;
				}
			}
			.coll{
				color: #8D8D8D;
				font-size: 24rpx;
			}
			.price-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					font-size: 32rpx;
					font-weight: 400;
					color: #D90707;
				}
				.similar{
					font-size: 22rpx;
					color: #888;
					border: 2rpx solid #AAAAAA;
					padding: 6rpx 14rpx;
					line-height: 24rpx;
					border-radius: 40rpx 40rpx;
				}
			}
		}
		.check-all-box{
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			background: #FFFFFF;
			width: 100%;
			padding: 0 20rpx;
			.check-left{
				color: #666666;
				font-size: 24rpx;
			}
			.check-right{
				.check-btn{
					width: 160rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					background: #FA436A;
					color: #FFFFFF;
					font-size: 32rpx;
				}
			}
		}
		
	}
</style>
